<template>
  <div>
    <div class="model">
      <div class="swiper-contain" ref="swiper-contain">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in srcList"
            :key="index"
          >
            <div class="slide_box">
              <img :src="item.src" alt="" />
              <div class="des">
                <h1 class="title">{{ item.title }}</h1>
              </div>
            </div>
          </div>
        </div>
        <div
          id="bannerModel"
          class="swiper-pagination"
          style="text-align:right;padding-right:60px;"
        >
          <!-- <span
            v-for="(item, index) in srcList"
            :key="index"
            :class="activeIn == index ? 'active' : ''"
            @click="changePage(index)"
          ></span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      activeIndex: 0,
      swiper: null,
      srcList: [
        {
          title: "一些描述",
          src: require("@/assets/images/20201225_125638_184.jpg")
        },
        {
          title: "一些描述",
          src: require("@/assets/images/20201223_014649_136.png")
        },
        {
          title: "一些描述",
          src: require("@/assets/images/20201223_024134_697.jpg")
        }
      ]
    };
  },
  computed: {
    activeIn() {
      let activeIndex = 0;
      if (this.activeIndex <= this.srcList.length) {
        activeIndex = this.activeIndex;
      } else {
        activeIndex = this.activeIndex - 3;
      }
      if (activeIndex == 0) {
        return this.srcList.length - 1;
      }
      return activeIndex - 1;
    }
  },
  methods: {
    changePage() {},
    swiperInit() {
      // const that = this;
      this.swiper = new Swiper(this.$refs["swiper-contain"], {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true,
        pagination: {
          clickable: true,
          el: ".swiper-pagination",
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active"
        }
        // on: {
        //   slideChangeTransitionEnd: function() {
        //     // console.log('this.activeIndex',this.activeIndex)
        //     that.activeIndex = this.activeIndex;
        //   }
        // }
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination',
        // },
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.swiperInit();
    });
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  background-color: #f8f2ea;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .swiper-contain {
    overflow: hidden;
    position: relative;
    .slide_box {
      position: relative;
      img {
        width: 100%;
      }
      .des {
        height: 30px;
        background-color: rgba($color: #000000, $alpha: 0.6);
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: 100%;
        .title {
          color: #ffffff;
          text-align: center;
          line-height: 30px;
          font-size: 12px;
          font-weight: 500;
        }
      }
    }
    /deep/ .my-bullet {
      width: 10px;
      height: 10px;
      display: inline-block;
      background-color: rgba($color: #ffffff, $alpha: 0);
      border-radius: 50%;
      border: 1px solid #fff;
      transition: 0.3s;
      margin: 0 5px;
      cursor: pointer;
    }
    /deep/ .my-bullet-active {
      background-color: rgba($color: #ffffff, $alpha: 1);
    }
  }
}
</style>
